<template>
  <view class="user-card-container">
    <!-- 背景渐变 -->
    <view class="gradient-bg"></view>
    
    <!-- 名片主体 -->
    <view class="card-main">
      <!-- 头像区域 -->
      <view class="avatar-section">
        <image :src="userInfo.avatar || '/static/images/default-avatar.png'" class="avatar" mode="aspectFill"></image>
        <view class="verify-badge" v-if="userInfo.roleGroup">
          <uni-icons type="checkmarkempty" size="12" color="#fff"></uni-icons>
        </view>
      </view>
      
      <!-- 基本信息 -->
      <view class="basic-info">
        <text class="name">{{ userInfo.nickName || userInfo.userName || '用户' }}</text>
        <view class="role-tag" v-if="userInfo.roleGroup">
          <text class="role-text">{{ userInfo.roleGroup }}</text>
        </view>
      </view>
      
      <!-- 详细信息卡片 -->
      <view class="info-card">
        <!-- 商户信息（如果是商户） -->
        <view v-if="userInfo.merchantName" class="info-section">
          <view class="section-title">
            <view class="title-icon">
              <uni-icons type="shop" size="18" color="#1890ff"></uni-icons>
            </view>
            <text class="title-text">商户信息</text>
          </view>
          <view class="info-list">
            <view class="info-item">
              <text class="label">商户名称</text>
              <text class="value">{{ userInfo.merchantName }}</text>
            </view>
            <view class="info-item" v-if="userInfo.merchantCode">
              <text class="label">商户编号</text>
              <text class="value">{{ userInfo.merchantCode }}</text>
            </view>
            <view class="info-item" v-if="userInfo.businessAddress">
              <text class="label">经营地址</text>
              <text class="value">{{ userInfo.businessAddress }}</text>
            </view>
          </view>
        </view>
        
        <!-- 基本信息 -->
        <view class="info-section">
          <view class="section-title">
            <view class="title-icon">
              <uni-icons type="person" size="18" color="#1890ff"></uni-icons>
            </view>
            <text class="title-text">基本信息</text>
          </view>
          <view class="info-list">
            <view class="info-item" v-if="!userInfo.merchantName">
              <text class="label">用户账号</text>
              <text class="value">{{ userInfo.userName }}</text>
            </view>
            <view class="info-item" v-if="userInfo.deptName">
              <text class="label">所属部门</text>
              <text class="value">{{ userInfo.deptName }}</text>
            </view>
            <view class="info-item" v-if="userInfo.email">
              <text class="label">电子邮箱</text>
              <text class="value">{{ userInfo.email }}</text>
            </view>
          </view>
        </view>
        
        <!-- 联系方式 -->
        <view class="info-section" v-if="userInfo.phonenumber || userInfo.contactPhone">
          <view class="section-title">
            <view class="title-icon">
              <uni-icons type="phone" size="18" color="#1890ff"></uni-icons>
            </view>
            <text class="title-text">联系方式</text>
          </view>
          <view class="info-list">
            <view class="info-item">
              <text class="label">联系电话</text>
              <text class="value">{{ userInfo.contactPhone || userInfo.phonenumber }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部装饰 -->
      <view class="footer-decoration">
        <view class="decoration-line"></view>
        <text class="system-name">安阳市食品安全综合管理平台</text>
        <view class="decoration-line"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserCard } from '@/api/system/user'

export default {
  data() {
    return {
      userId: null,
      userInfo: {}
    }
  },
  onLoad(options) {
    // 获取用户ID（支持id和userId两种参数名）
    if (options.id || options.userId) {
      this.userId = options.id || options.userId
      this.loadUserInfo()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    // 加载用户信息
    async loadUserInfo() {
      try {
        uni.showLoading({ title: '加载中...' })
        
        const response = await getUserCard(this.userId)
        if (response.code === 200 && response.data) {
          this.userInfo = response.data
        } else {
          uni.showToast({
            title: response.msg || '获取用户信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style scoped>
.user-card-container {
  min-height: 100vh;
  background: #f5f6f8;
  position: relative;
}

.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-main {
  position: relative;
  padding: 60rpx 30rpx 30rpx;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
  position: relative;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  border: 6rpx solid #fff;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.verify-badge {
  position: absolute;
  bottom: 0;
  right: calc(50% - 80rpx);
  width: 36rpx;
  height: 36rpx;
  background-color: #52c41a;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid #fff;
}

.basic-info {
  text-align: center;
  margin-bottom: 40rpx;
}

.name {
  font-size: 42rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 15rpx;
}

.role-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  padding: 8rpx 24rpx;
}

.role-text {
  color: #fff;
  font-size: 26rpx;
}

.info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.info-section {
  margin-bottom: 40rpx;
}

.info-section:last-child {
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.title-icon {
  width: 36rpx;
  height: 36rpx;
  background: #e6f7ff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}

.title-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.info-list {
  padding-left: 48rpx;
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 26rpx;
  color: #999;
  width: 140rpx;
  flex-shrink: 0;
}

.value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.footer-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  padding: 0 30rpx;
}

.decoration-line {
  flex: 1;
  height: 1rpx;
  background: linear-gradient(90deg, transparent, #ddd, transparent);
}

.system-name {
  font-size: 24rpx;
  color: #999;
  padding: 0 20rpx;
}
</style>